<template>
	<view class="app-container" :style="{ 'min-height': 'calc(100vh - ' + windowBottom + 'px - 21rpx)' }">
		<u-navbar title="我的" :autoBack="false" placeholder bgColor="#cf141a" :titleStyle="{ color: '#fff' }">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
		<view class="header flex">
			<block v-if="uid !== ''">
				<u-avatar :src="form.photo" size="124rpx"></u-avatar>
				<view class="info flex flex-between flex-align-center">
					<view class="item flex">
						<u--text :text="form.uname ? form.uname : form.id" color="#ffffff" size="40rpx" block></u--text>
						<u--text :text="form.last_time_text" color="#ffffff" size="26rpx" block></u--text>
					</view>
				</view>
			</block>
			<block v-else>
				<u-button text="立即登录" :customStyle="{ width: '220rpx' }" @click="apiLogin"></u-button>
			</block>
		</view>
		<view class="list-card">
			<view class="item flex flex-between flex-align-center" @click="$toPath.goPage('pages/mine/form')">
				<view class="info flex flex-align-center">
					<u--image :showLoading="true" :src="baseUrl + '/before/mine/list-icon1.png'" width="60rpx" height="60rpx"></u--image>
					<u--text text="我的信息" color="#000000" size="26rpx" block align="center" margin="0 15rpx 0 0"></u--text>
				</view>
				<u-icon name="arrow-right" color="#62626d" size="30rpx"></u-icon>
			</view>
			<view class="item flex flex-between flex-align-center" @click="$toPath.goPage('pages/listings/collect')">
				<view class="info flex flex-align-center">
					<u--image :showLoading="true" :src="baseUrl + '/before/mine/list-icon2.png'" width="60rpx" height="60rpx"></u--image>
					<u--text text="我的收藏" color="#000000" size="26rpx" block align="center" margin="0 15rpx 0 0"></u--text>
				</view>
				<u-icon name="arrow-right" color="#62626d" size="30rpx"></u-icon>
			</view>
			<view class="item flex flex-between flex-align-center" @click="$toPath.goPage('pages/issue/index')">
				<view class="info flex flex-align-center">
					<u--image :showLoading="true" :src="baseUrl + '/before/mine/list-icon3.png'" width="60rpx" height="60rpx"></u--image>
					<u--text text="常见问题" color="#000000" size="26rpx" block align="center" margin="0 15rpx 0 0"></u--text>
				</view>
				<u-icon name="arrow-right" color="#62626d" size="30rpx"></u-icon>
			</view>
			<view class="item flex flex-between flex-align-center" @click="$toPath.goPage('pages/article/index', { title: '隐私政策', key: 'apiUserPrivacy' })">
				<view class="info flex flex-align-center">
					<u--image :showLoading="true" :src="baseUrl + '/before/mine/list-icon4.png'" width="60rpx" height="60rpx"></u--image>
					<u--text text="隐私政策" color="#000000" size="26rpx" block align="center" margin="0 15rpx 0 0"></u--text>
				</view>
				<u-icon name="arrow-right" color="#62626d" size="30rpx"></u-icon>
			</view>
			<view class="item flex flex-between flex-align-center" @click="$toPath.goPage('pages/article/index', { title: '用户协议', key: 'apiUserAgreement' })">
				<view class="info flex flex-align-center">
					<u--image :showLoading="true" :src="baseUrl + '/before/mine/list-icon5.png'" width="60rpx" height="60rpx"></u--image>
					<u--text text="用户协议" color="#000000" size="26rpx" block align="center" margin="0 15rpx 0 0"></u--text>
				</view>
				<u-icon name="arrow-right" color="#62626d" size="30rpx"></u-icon>
			</view>
			<view class="item flex flex-between flex-align-center" @click="$toPath.goPage('pages/article/index', { title: '关于我们', key: 'apiUserAboutus' })">
				<view class="info flex flex-align-center">
					<u--image :showLoading="true" :src="baseUrl + '/before/mine/list-icon6.png'" width="60rpx" height="60rpx"></u--image>
					<u--text text="关于我们" color="#000000" size="26rpx" block align="center" margin="0 15rpx 0 0"></u--text>
				</view>
				<u-icon name="arrow-right" color="#62626d" size="30rpx"></u-icon>
			</view>
			<view class="item flex flex-between flex-align-center" @click="apiUserContactTel">
				<view class="info flex flex-align-center">
					<u--image :showLoading="true" :src="baseUrl + '/before/mine/list-icon7.png'" width="60rpx" height="60rpx"></u--image>
					<u--text text="联系客服" color="#000000" size="26rpx" block align="center" margin="0 15rpx 0 0"></u--text>
				</view>
				<u-icon name="arrow-right" color="#62626d" size="30rpx"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
import { baseUrl } from '@/utils/config.js';
export default {
	data() {
		return {
			windowBottom: 0,
			uid: '',
			form: {
				jifen: 0,
				score: 0
			},
			baseUrl
		};
	},
	computed: {},
	methods: {
		apiPartnerApplyRes() {
			this.$api
				.apiPartnerApplyRes({
					uid: uni.getStorageSync('uid')
				})
				.then((res) => {
					if (res.status === 1 || res.status === 3) {
						this.toPath('pages/join/form', {});
					}
				});
		},
		apiArenaApplyRes() {
			this.$api
				.apiArenaApplyRes({
					uid: uni.getStorageSync('uid')
				})
				.then((res) => {
					if (res.status === 1 || res.status === 3) {
						this.toPath('pages/meadowlands/enter', {});
					}
				});
		},
		apiCoachApplyRes() {
			this.$api
				.apiCoachApplyRes({
					uid: uni.getStorageSync('uid')
				})
				.then((res) => {
					if (res.status === 1 || res.status === 3) {
						this.toPath('pages/assistant/application', {});
					}
				});
		},
		init() {
			wx.login({
				success: (res) => {
					console.log(res);
					this.code = res.code;
					this.uid = '';
				}
			});
		},
		apiLogin() {
			this.$api
				.apiLogin({
					code: this.code
				})
				.then((res) => {
					this.uid = res.id;
					uni.setStorage({
						key: 'uid',
						data: res.id,
						success: (res) => {
							console.log(this.uid);
							this.apiUserInfo();
						}
					});
				});
		},
		apiUserInfo() {
			this.$api
				.apiUserInfo({
					uid: uni.getStorageSync('uid')
				})
				.then((res) => {
					uni.setStorageSync('userInfo', JSON.stringify(res.userinfo));
					this.form = res.userinfo;
				});
		},
		apiUserContactTel() {
			this.$api.apiUserContactTel().then((res) => {
				console.log();
				uni.makePhoneCall({
					phoneNumber: res.info.tel,
					success: (res) => {
						console.log('拨打成功：' + res);
					},
					fail: (err) => {
						console.log('拨打失败：' + err);
					}
				});
			});
		}
	},
	onShow() {
		this.windowBottom = uni.$u.sys().windowBottom;
		uni.getStorage({
			key: 'uid',
			success: (res) => {
				console.log(res);
				this.uid = res.data;
				this.apiUserInfo();
			},
			fail: (err) => {
				this.init();
			}
		});
	},
	onLoad() {}
};
</script>

<style lang="scss" scoped>
.app-container {
	background: #e6e6e6;
	padding-bottom: 21rpx;

	.header {
		height: calc(262rpx - 80rpx - 56rpx);
		background: #cf141a;
		border-right: none;
		padding: 40rpx 72rpx;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: -56rpx;
			background-image: url('/static/mine/header-icon.png');
			background-repeat: no-repeat;
			background-size: 100%;
			height: 56rpx;
			z-index: 2;
		}

		.info {
			flex: 1;
			margin-left: 42rpx;

			.item {
				flex-direction: column;
				justify-content: space-evenly;
				height: 124rpx;
			}
		}
	}

	.list-card {
		margin: 10rpx 20rpx 0;
		background: #fff;
		border-radius: 20rpx;
		padding-top: 50rpx;

		.item {
			height: 80rpx;
			margin: 0 24rpx;
			border-top: 3rpx solid #e7e7e7;
			box-sizing: border-box;

			&:first-child {
				border-top: none;
			}
		}
	}
}
</style>
